<template>
	<view class="m-price" :style="p">
		<text :style="p2" v-if="unit">￥</text>
		<text :style="p1">{{numArr[0]}}</text>
		<text :style="p2" v-if="isFill">.{{numArr[1] || '00'}}</text>
	</view>
</template>

<script>
	export default {
		name: "m-price",
		data() {
			return {

			};
		},
		props: {
			//传入的价格
			value: {
				type: [String, Number],
				default: '0.00'
			},
			//单位
			unit: {
				type: Boolean,
				default: true,
			},
			//是否显示小数点  默认显示
			fill: {
				type: Boolean,
				default: true,
			},
			//大小比例 数组形式
			size: {
				type: Array,
				default: () => [36, 26]
			},
			color: {
				type: String,
				default: '#f95f5f'
			},
			digit: {
				type: [String, Number],
				default: 2
			},
			weight: {
				type: [String, Number],
				default: '400'
			},
		},
		computed: {
			numArr() {
				let num = this.value.toString().split('.')
				if (num[1]) {
					num[1] = num[1].substring(0, this.digit)
				}
				return num
			},
			isFill() {
				//如果余数大于 0  一定会显示
				if (Number(this.numArr[1] > 0)) {
					return true
				}
				//设置不显示  
				return this.fill
			},
			p() {
				return {
					"font-weight": this.weight,
					"color": this.color
				}
			},
			p1() {
				return {
					'font-size': this.size[0] * 0.9 + 'rpx'
				}
			},
			p2() {
				return {
					'font-size': this.size[1] + 'rpx'
				}
			}
		},
	}
</script>

<style lang="scss">
	.m-price {
		display: inline;
		// font-family:'RousseauDeco';
		font-family: 'PingFang SC';
		font-weight: bold !important;
	}
</style>